<template>
  <div>
    <van-nav-bar title="购物车" @click-left="onClickLeft">
      <van-icon name="arrow-left" slot="left" color="black" size="20px"/>
    </van-nav-bar>

    <van-row class="van" v-for="(item) in list">
      <div class="shadow"></div>

      <van-swipe-cell :right-width="60" class=''>
        <van-col span="2" offset="1" class="sp1">
          <input type="checkbox" class="checkItem" @click="dan">
        </van-col>
        <van-col span="3" class="sp2">
          <img :src="item.pimg" alt>
        </van-col>
        <van-col span="9" offset="2" class="sp3">
          <span>{{item.pname}}</span>
          <p>尺码：xxxx</p>
          <p>
            ￥
            <span>{{item.pprice}}</span>
          </p>
        </van-col>
        <van-col span="7" class="sp4">
          <van-stepper v-model="item.pnum" @change="nap(item.pid,item.pnum)" id="bu"/>
        </van-col>
        <van-button square slot="right" type="danger" text="删除" @click="sap(item.pid)"/>
      </van-swipe-cell>
    </van-row>

    <van-row class="van1">
      <van-col span="2" offset="1" class="sp5">
        <input type="checkbox" class="checkAll" @click="fu">
      </van-col>
      <van-col span="3" class="sp6">全部</van-col>
      <van-col span="7" offset="3" class="sp7">
        <p>
          合计:
          <span>￥{{tot}}</span>
        </p>
      </van-col>
      <van-col span="6">
        <button class="btn1" @click="tap">结算</button>
      </van-col>
    </van-row>
    <template v-if="list.length"></template>
    <!--当购物车为空时，则提示-->
    <div v-else>购物车空空如也</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Cart",
  inject: ["reload"],
  data() {
    return {
      //  购物车中的数据
      list: [],
      //  删除的时候的pid和相应的index
      spid: "",

      // 用于最后的计算总价
      data: "",
      // 步进器中的商品pid和pnum
      npid: "",
      npnum: "",
      tot: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tap() {
      this.$router.push("/sure");
    },
    sap(r, m) {
      console.log(r, m);
      // 删除购物车中的详情
      this.spid = r;
      console.log(this.spid);
      var _this = this;
      axios({
        method: "get",
        url: "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
        params: {
          uid: 11003,
          pid: _this.spid
        }
      }).then(res => {
        console.log(res);
        // 根据pid删除对应的商品
        for (let j = 0; j < _this.data.length; j++) {
          if (_this.data[j].pid == _this.spid) {
            _this.data.splice(j, 1);
          }
        }
        // 刷新
        let totalnum = 0;
        let totalprice = 0;
        let oallck = document.querySelector(".checkAll");
        for(let i=0;i<_this.data.length;i++){
            totalprice +=parseInt(_this.data[i].pprice)*parseInt(_this.data[i].pnum) ;
        }
        this.tot=totalprice;
        if(this.tot==0){
          oallck.checked=false
        }
      });
    },
    nap(r, m) {
      this.npid = r;
      this.npnum = m;
      var _this = this;
      // 更新购物车中的数量
      this.total();
      axios({
        method: "get",
        url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
        params: {
          uid: 11003,
          pid: _this.npid,
          pnum: _this.npnum
        }
      }).then(res => {
        // console.log(res)
      });
    },
    chx() {
      // console.log(2)
    },
    // 计算总价
    total() {
      let ock = document.querySelectorAll(".checkItem");
      let totalnum = 0;
      let totalprice = 0;
      for (let i = 0; i < ock.length; i++) {
        // console.log(ock[i].checked)
        // console.log(data[i])
        if (ock[i].checked == true) {
        //   totalnum += parseInt(this.data[i].pnum);
          totalprice +=parseInt(this.data[i].pprice)*parseInt(this.data[i].pnum) ;
        }
        this.tot = totalprice;
      }
    },

    // 单选框
    dan() {
      let ock = document.querySelectorAll(".checkItem");
      let oallck = document.querySelector(".checkAll");
      let flag = true;
      for (let j = 0; j < ock.length; j++) {
        if (ock[j].checked == false) {
          flag = false;
        }
        if (flag == false) {
          oallck.checked = false;
        } else {
          oallck.checked = true;
        }
        this.total();
      }
    },

    // 复选框
    fu() {
      let oallck = document.querySelector(".checkAll");
      let ock = document.querySelectorAll(".checkItem");
      for (let i = 0; i < ock.length; i++) {
        if (oallck.checked) {
          ock[i].checked = true;
        } else {
          ock[i].checked = false;
        }
        this.total();
      }
    }
  },
  mounted() {
    var _this = this;
    // 查看购物车中的列表详情
    axios({
      method: "get",
      url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
      params: {
        id: 11003
      }
    })
      .then(res => {
        // console.log(res.data.data)
        _this.list = res.data.data;
        _this.data = res.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.shadow {
  left: 0px;
  top: 90px;
  width: 375px;
  height: 1px;
  background: silver;
  margin-bottom: 15px;
}
.sp1 {
  margin-top: 45px;
}
.sp2 img {
  width: 80px;
  height: 80px;
  margin-top: 5px;
}
.sp3 span:nth-child(1) {
  display: block;
  font-size: 16px;
  color: black;
  margin-top: 2px;
  margin-bottom: 4px;
}
.sp3 p:nth-child(2) {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}
.sp3 p:nth-child(3) {
  font-size: 14px;
  color: #101010;
  margin-top: 40px;
}
.sp3 p:nth-child(3) span {
  display: inline;
  font-size: 14px;
  color: black;
}
.sp4 {
  margin-top: 80px;
}
.sp5 {
  margin-top: 15px;
}
.sp6 {
  margin-top: 15px;
  font-size: 14px;
}
.sp7 {
  margin-top: 15px;
  font-size: 14px;
}
.van1 {
  width: 375px;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: white;
  border-top: 1px solid silver;
}
.btn1 {
  margin-right: 0;
  width: 133px;
  height: 49px;
  background: silver;
  font-size: 14px;
  color: #101010;
  border: none;
  outline: none;
}
</style>
